import Taro, { Component } from "@tarojs/taro";
import { View, Image, Text } from "@tarojs/components";
import { inject, observer } from '@tarojs/mobx'
import { IStoreProps } from '../../store/Stores'
import {getAvatar, navigateBack, subTime} from '../../utils/common'
import { UserTeamOutput } from '../../api/api'
import './teamMember.scss'



interface IHomeProps extends IStoreProps { }

@inject("stores")
@observer
class TeamMember extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {} as UserTeamOutput
  }

  componentWillMount() {
    let id = this.$router.params.id
    if (!id) {
      navigateBack(); return;
    }
    this.userTeamById(id)
  }

  userTeamById(id: string): void {
    let { userStore } = this.props.stores
    userStore.userTeamById({
      id,
      callback: res => { this.setState({ info: res }) }
    })
  }

  render() {
    let { info } = this.state
    return (
      <View className='team-member page-bg content-20'>
        <View className='team-member__header'>
          <Image src={getAvatar(info.avatar)} className='team-member__img' />
          <View className='team-member__info'>
            <View className='team-member__name'>{info.nickName} <Text className='team-member__le' style={{display: 'none'}}>初级联谊</Text> </View>
            <View className='team-member__tel'>{info.userPhone}</View>
            <View className='team-member__date desc'>注册时间：{subTime(info.creationTime)}</View>
          </View>
          <View className='team-member__r'>共{info.total}个成员</View>
        </View>

        <View className='interval' />
        {
          info.gradeLists&&info.gradeLists.length > 0&&
          <View className='line-common__wrap'>
            {
              info.gradeLists.map(item => {
                return(
                  <View className='line-common'>
                    <View className='line-common__title'>{item.graName}</View>
                    <View className='line-common__desc'>{item.number}个</View>
                  </View>
                )
              })
            }
          </View>
        }
      </View>
    )
  }
}

export default TeamMember
